
<!-- 个人中心页面 展示用户头像,用户iduserId,手机号userPhone,用户积分userPoints -->
<template>
  <div id="app">
    <div class="user-profile">
      <el-row class="tac">
        <input class="searchMessage" placeholder="搜索">
        <div v-for="(message) in messageList" :key="message.userId" class="container">
          <MessageBox
            class="messageBox"
            :user-id="message.userId"
            :user-name="message.userName"
            :message="message.message"
            :avatar="message.avatar"
            :num-of-new-message="message.numOfNewMessage"
            @click.native="handleShowChat"
          />
          <Chat
            v-show="false"
            ref="chat"
            class="chat"
            :user-id="message.userId"
          />
        </div>
      </el-row>
    </div>
  </div>

</template>

<script>
import MessageBox from './messageBox.vue'
import Chat from './chat.vue'
export default {
  components: { MessageBox, Chat },
  data() {
    return {
      messageList: [
        {
          userId: 1,
          userName: '项目1与项目2数据分析比对',
          message: '项目1',
          avatar: 'http://bittersweetyao.gitee.io/pic/pic/avatar1.png',
          numOfNewMessage: 6
        }
      ]
      // dialogVisible: false
    }
  },
  created() {
  },
  methods: {
    handleShowChat(e) {
      console.log(this.$refs.chat)
      this.$refs.chat.forEach(ch => {
        ch.$el.style.display = 'none'
      })
      e.currentTarget.nextElementSibling.style = 'display:block'
    }
  }
}
</script>
<style scoped>
.clock{
  /*background-color: #005dba;*/
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.searchMessage{
  width: 90%;
  height: 30px;
  margin:5%;
  margin-bottom: 10px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
}
@media screen and (max-width:1000px) {
  .messageBox {
    max-width: 1000px;
  }
}
@media screen and (min-width:1000px) {
  .searchMessage{
    width: 40%;
    margin-left: 0%;
  }
  .messageBox {
    width: 40%;
    margin-left: 0%;
  }
}
</style>
